<template>
  <Dialog v-model="dialogVisible" :title="dialogTitle">
    <ContentWrap>
      <el-form :model="queryParams" ref="queryFormRef" label-width="auto" :inline="true">
        <el-form-item label="名称" prop="name">
          <el-input
            v-model="queryParams.name"
            placeholder="请输入名称"
            :clearable="true"
            @keyup.enter="getPage"
          />
        </el-form-item>
        <el-form-item>
          <el-button v-hasPermi="['restaurant:dish-type:query']" @click="handleClickSearch">
            <Icon icon="ep:search" />
            搜索
          </el-button>
          <el-button @click="handleClickReset">
            <Icon icon="ep:refresh" />
            重置
          </el-button>
          <el-button v-hasPermi="['restaurant:dish-type:create']" @click="handleClickCreate">
            <Icon icon="ep:plus" />
            新增菜品类型
          </el-button>
        </el-form-item>
      </el-form>
      <Table
        :columns="columns"
        :page-param="queryParams"
        :adaptive="true"
        :page-data="queryData"
        save-key="RestaurantDishType"
        @page-change="getPage"
        @row-dblclick="handleTableDblclick"
      >
        <template #menu="{ row }">
          <context-menu-item
            label="修改"
            @click="handleMenuUpdate(row)"
            v-hasPermi="['restaurant:dish-type:update']"
          />
          <context-menu-item
            label="删除"
            @click="handleMenuDelete(row)"
            v-hasPermi="['restaurant:dish-type:delete']"
          />
        </template>
      </Table>
    </ContentWrap>
    <RestaurantDishTypeEdit ref="editFormRef" @success="getPage" />
  </Dialog>
</template>
<script setup name="RestaurantDishType" lang="ts">
import * as RestaurantDishApi from '@/api/restaurant/dish'
import RestaurantDishTypeEdit from './RestaurantDishTypeEdit.vue'
const message = useMessage()
const dialogVisible = ref(false)
const dialogTitle = ref('菜品类型')
const editFormRef = ref()
const queryFormRef = ref()
const queryParams = ref({
  name: undefined
})
const queryData = ref()
const columns = [
  {
    label: '名称',
    prop: 'name'
  },
  {
    label: '描述',
    prop: 'description'
  },
  {
    label: '创建时间',
    prop: 'createTime'
  }
]
/** 打开弹窗 */
const open = () => {
  dialogVisible.value = true
  handleClickSearch()
}

defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 搜索按钮操作 */
const handleClickSearch = () => {
  getPage()
}

/** 重置按钮操作 */
const handleClickReset = () => {
  queryFormRef.value?.resetFields()
  handleClickSearch()
}

/** 新增菜品类型按钮操作 */
const handleClickCreate = () => {
  editFormRef.value.open('create', 0)
}

/** 处理响应事件  */
const getPage = async () => {
  queryData.value = await RestaurantDishApi.pageQueryDishType(queryParams.value)
}

/** 处理右击事件 修改菜品类型 */
const handleMenuUpdate = (row) => {
  editFormRef.value.open('update', row.id)
}

/** 处理tables双击修改事件 */
const handleTableDblclick = (row) => {
  editFormRef.value.open('update', row.id)
}

/** 处理右击事件 删除菜品类型 */
const handleMenuDelete = async (row) => {
  await message.confirm('确定要删除此菜品类型吗？')
  await RestaurantDishApi.dishTypeDelete(row.id)
}
</script>
